<template>
	<div class="front_detail_wrapper" v-loading="loading">
		<div class="item">
			<div class="label">课题名称：</div>
			<div class="value">{{ detailData.name }}</div>
		</div>
		<div class="item">
			<div class="label">课题编号：</div>
			<div class="value">{{ detailData.filed1 }}</div>
		</div>
		<div class="item">
			<div class="label">课题类型：</div>
			<div class="value">{{ returnTopicTypeName(detailData.type) }}</div>
		</div>
		<div class="item">
			<div class="label">研究领域：</div>
			<div class="value">{{ detailData.sector }}</div>
		</div>
		<div class="item">
			<div class="label">测量技术：</div>
			<div class="value">{{ returnMeasureName(detailData.measureList) }}</div>
		</div>
		<div class="item">
			<div class="label">强磁场PI：</div>
			<div class="value">{{ returnPrincipalName(detailData.piList) }}</div>
		</div>
		<div class="item">
			<div class="label">申请人：</div>
			<detail-table :columns="applicantColumns" :data="applicantData" />
		</div>
		<div class="item">
			<div class="label">合作者：</div>
			<detail-table :columns="collaborateColumns" :data="collaborateData" />
		</div>
		<div class="item">
			<div class="label">相关经费信息：</div>
			<detail-table :columns="fundColumns" :data="fundData" />
		</div>
		<div class="item">
			<div class="label">课题申请文件：</div>
			<download-file :data="fileListData" />
		</div>
		<div class="item" v-if="!!detailData.filed5">
			<div class="label">课题签名：</div>
			<div class="value">
				<el-button type="text" @click="handleLookSign(detailData.filed5)">查看签名</el-button>
			</div>
		</div>
		<div class="item">
			<div class="label">审核信息：</div>
			<div class="value">{{ detailData.filed1 }}</div>
		</div>
		<sw-image-viewer class="preview_container" v-if="imgVisible" :on-close="handlePreviewClose" :url-list="imgList"></sw-image-viewer>
	</div>
</template>

<script>
import lodash from 'lodash';
import { mapGetters } from 'vuex';
import detailTable from '../common/table';
import downloadFile from '../common/download';
import { topicDetail } from '@/api/business/tbTopic';
import swImageViewer from 'element-ui/packages/image/src/image-viewer';
export default {
	components: { detailTable, downloadFile, swImageViewer },
	data() {
		return {
			imgList: [],
			loading: false,
			detailData: {},
			imgVisible: false,
			applicantColumns: [
				{ title: '姓名', field: 'userName' },
				{ title: '单位', field: 'filed2' },
				{ title: '邮件地址', field: 'account' },
				{ title: '电话', field: 'phone' }
			],
			collaborateColumns: [
				{ title: '参与方式', field: 'modeType' },
				{ title: '姓名', field: 'name' },
				{ title: '单位', field: 'dept' },
				{ title: '职称', field: 'position' },
				{ title: '角色', field: 'role' }
			],
			fundColumns: [
				{ title: '经费类型', field: 'type' },
				{ title: '标题', field: 'name' },
				{ title: '经费号', field: 'fno' },
				{ title: '总额度', field: 'quota' }
			]
		};
	},
	computed: {
		...mapGetters(['dictEnums', 'principalData']),
		topicId() {
			return this.$route.params.id;
		},
		applicantData() {
			let userData = this.detailData.user;
			let fields = this.applicantColumns.map((n) => n.field);
			return !userData ? [] : [lodash.pick(userData, fields)];
		},
		collaborateData() {
			let datas = this.detailData.collaList || [];
			let types = this.dictEnums['PARTICIPATE_WAY'] || [];
			return datas.map((n) => {
				let typeData = lodash.find(types, { value: n.modeType });
				return { ...n, modeType: !typeData ? '' : typeData.msg };
			});
		},
		fundData() {
			let datas = this.detailData.fundsList || [];
			let types = this.dictEnums['FUND_TYPE'] || [];
			return datas.map((n) => {
				let typeData = lodash.find(types, { value: n.type });
				return { ...n, type: !typeData ? '' : typeData.msg };
			});
		},
		fileListData() {
			let datas = this.detailData.fileJson || '';
			return datas.isJSON() ? JSON.parse(datas) : [];
		}
	},
	watch: {
		topicId: {
			handler(id) {
				this.loading = true;
				this.getTopicDetail();
			},
			immediate: true
		}
	},
	methods: {
		//获取课题详情
		async getTopicDetail() {
			let result = await topicDetail(this.topicId).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.detailData = this.$detailData(result.data);
			}
		},

		//返回课题类型名称
		returnTopicTypeName(type) {
			let typeArr = this.dictEnums['PROJECT_TYPE'] || [];
			let typeData = lodash.find(typeArr, { value: type });
			return !typeData ? '' : typeData.msg;
		},

		//返回测量技术名称
		returnMeasureName(arr) {
			let nameArr = !arr ? [] : arr.map((n) => n.piId);
			return nameArr.join(' / ');
		},

		//返回PI名称
		returnPrincipalName(arr) {
			let piIdArr = !arr ? [] : arr.map((n) => n.piId);
			let piArr = piIdArr.map((id) => {
				let piData = lodash.find(this.principalData, { id });
				return !piData ? '' : piData.userName;
			});
			return piArr.join(' / ');
		},

		//查看签名
		handleLookSign(id) {
			if (!!id) {
				this.$store.dispatch('getFileUrl', id).then((res) => {
					this.imgList = [res.setFilePath()];
					this.imgVisible = true;
				});
			} else {
				this.$showCustomMessage('warning', `暂无签名`);
			}
		},

		//关闭签名预览
		handlePreviewClose() {
			this.imgVisible = false;
		}
	}
};
</script>
<style lang="scss">
.preview_container {
	.el-image-viewer__btn {
		z-index: 2;
	}

	.el-image-viewer__canvas {
		position: relative;
		z-index: 1;
		background-color: #fff;
	}
}
</style>
<style lang="scss" scoped>
@use '../common/formStyle.scss';
</style>
